{{Template:SZPT-CHINA/head}}
<html>

<head></head>
<!-- jquery 公共CSS-->
<script src="https://2021.igem.org/Team:SZPT-CHINA/JS/jQuery&action=raw&ctype=text/javascript"></script>
<link rel="stylesheet" href="https://2021.igem.org/Team:SZPT-CHINA/CSS/Public?action=raw&amp;ctype=text/css">


<script>
    //设置展开
    $(document).ready(function () {
        $("#third2").fadeToggle(500);
        $("#third3").fadeToggle(500);
        $("#third4").fadeToggle(500);
    });

</script>
<script>
    $(document).ready(function () {
        //document.body.append(document.getElementById('loadImg'))
        //滑动
        //加载适配
        var loadImg = document.getElementById('downContent'); //选取id为test的元素
        loadImg.style.display = 'none'; // 隐藏选择的元素
        init();
        var loadImg = document.getElementById('loadImg'); //选取id为test的元素
        loadImg.style.display = 'block'; // 隐藏选择的元素
    });


    //BEGIN-loading
    var loadhidekey = 0;

    window.onload = function () {
        console.log("页面加载好了", loadhidekey)
        setTimeout(function () {

        }, 10);
        init();


        setTimeout(function () {
            //$("#loaderDownId").hide();
            //滑到顶部
            document.body.scrollTop = document.documentElement.scrollTop = 0;
            loadhidekey = 1
            $("#directory").hide();
            $("#loadingHome").hide();
            var loadImg = document.getElementById('downContent'); //选取id为test的元素
            loadImg.style.display = 'block'; // 隐藏选择的元素
            document.body.append(document.getElementById('directory'))
            document.body.append(document.getElementById('head'))
            // $("#loading").hide();
        }, 1000);




        //


    }

    function animateScroll(element, speed) {
        let rect = element.getBoundingClientRect();
        //获取元素相对窗口的top值，此处应加上窗口本身的偏移
        let top = window.pageYOffset + rect.top - 100;
        let currentTop = 0;
        let requestId;
        //采用requestAnimationFrame，平滑动画
        function step(timestamp) {
            currentTop += speed;
            if (currentTop <= top) {
                window.scrollTo(0, currentTop);
                requestId = window.requestAnimationFrame(step);
            } else {
                window.cancelAnimationFrame(requestId);
            }
        }
        window.requestAnimationFrame(step);
    }



    //设置展开
    $(document).ready(function () {

        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
            // mobilePage();
            designHeight = 3100;
        } else {
            //pc
            designHeight = 980;
        }
        lateHeight = document.documentElement.clientHeight;
        heightRatio = lateHeight / designHeight
        console.log("height:", heightRatio)
        console.log('1')


        var value = document.getElementById('dir1').getAttribute("style")
        value = value.replace(/ffffff/, "fffea4")
        $("#dir1").attr("style", value);


        document.getElementById("dir1").onclick = function () {

            $("#third1").fadeIn(500);
            $("#third2").fadeOut(500);
            $("#third3").fadeOut(500);
            $("#third4").fadeOut(500);


            var dir1key = 0;
            if (dir1key == 0) {
                let target = document.getElementById('content1');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir1").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);


                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);


                dir1key = 1;
            } else {
                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);
                dir1key = 0
            }

        }
        document.getElementById("dir2").onclick = function () {
            $("#third1").fadeOut(500);
            $("#third2").fadeIn(500);
            $("#third3").fadeOut(500);
            $("#third4").fadeOut(500);

            var dir2key = 0;
            if (dir2key == 0) {
                let target = document.getElementById('content2');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);


                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);


                dir2key = 1;
            } else {
                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);
                dir2key = 0
            }
        }
        document.getElementById("dir3").onclick = function () {
            $("#third1").fadeOut(500);
            $("#third2").fadeOut(500);
            $("#third3").fadeIn(500);
            $("#third4").fadeOut(500);


            var dir3key = 0;
            if (dir3key == 0) {
                let target = document.getElementById('content3');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);


                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);

                dir3key = 1;
            } else {
                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);
                dir3key = 0
            }
        }
        document.getElementById("dir4").onclick = function () {
            $("#third1").fadeOut(500);
            $("#third2").fadeOut(500);
            $("#third3").fadeOut(500);
            $("#third4").fadeIn(500);


            var dir4key = 0;
            if (dir4key == 0) {
                let target = document.getElementById('content4');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);


                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);


                dir4key = 1;
            } else {
                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);
                dir4key = 0
            }
        }

        $("#hideContent1").fadeToggle(500);
        document.getElementById("hidekey1").onclick = function () {
            console.log("123")
            $("#hideContent1").fadeToggle(500);
        }

        $("#hideContent2").fadeToggle(500);
        document.getElementById("hidekey2").onclick = function () {
            console.log("123")
            $("#hideContent2").fadeToggle(500);
        }


    });
    $(window).scroll(function () {

        if (loadhidekey == 1) {


            if ($(this).scrollTop() > 270 * heightRatio / 0.713265306122449) {
                $("#directory").show();
            } else {
                $("#directory").hide();
            }
        }

    });
    // 视频加载好
    // function hideLoad() {
    //     console.log("视频加载好了", loadhidekey)

    //     if (loadhidekey == 1) {
    //         setTimeout(function () {
    //             //$("#loaderDownId").hide();
    //             $("#loadingHome").hide();
    //             //$("#loading").hide();
    //         }, 10);
    //     }
    //     else if (loadhidekey == 0) {
    //         loadhidekey = 1;
    //     }
    // }
    //END-loading
</script>
<!-- jquery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        // $("#m1").hover(
        //     function () {
        //         keyPic()
        //         $("#p1").animate({
        //             height: '700px',
        //             width: '650px'
        //         }, 20);
        //         $("#bg1").attr("style", "background-color: #e2594f;float: left;width: 25%;height: 650px;");

        //     },
        //     function () {
        //         $("#p1").attr("style", "height: 650px;float: left;");
        //         $("#bg1").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 650px;");

        //     }
        // )
        //设置默认


        var pNo = "height: 450px;width:450px;float: left;transition: all 0.3s;"
        var bgNo = "background-color: #f8c8b2;float: left;width: 25%;height: 480px;transition: all 0.3s;"
        var p = "height: 480px;width:480px;float: left;	transition: all 0.3s;"
        var bg = "background-color: #e2594f;float: left;width: 25%;height: 480px;transition: all 0.3s;"

        $("#p1").attr("style", p);
        $("#bg1").attr("style", bg);

        $("#p2").attr("style", pNo);
        $("#bg2").attr("style", bgNo);

        $("#p3").attr("style", pNo);
        $("#bg3").attr("style", bgNo);

        $("#p4").attr("style", pNo);
        $("#bg4").attr("style", bgNo);

        $("#m1").mouseover(
            function () {
                $("#p2").attr("style", pNo);
                $("#bg2").attr("style", bgNo);

                $("#p3").attr("style", pNo);
                $("#bg3").attr("style", bgNo);

                $("#p4").attr("style", pNo);
                $("#bg4").attr("style", bgNo);
                //1
                $("#p1").attr("style", p);
                $("#bg1").attr("style", bg);
            },

        ),
            $("#m2").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //2
                    $("#p2").attr("style", p);
                    $("#bg2").attr("style", bg);
                },
            ),
            $("#m3").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //3
                    $("#p3").attr("style", p);
                    $("#bg3").attr("style", bg);
                },
            ),
            $("#m4").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);
                    //4
                    $("#p4").attr("style", p);
                    $("#bg4").attr("style", bg);
                },
            )
        $("#m1").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Human_Practices";
        });
        $("#m2").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Communication";
        });
        $("#m3").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Education";
        });
        $("#m4").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Inclusivity";
        });

    });
</script>
<script>
    $(document).ready(function () {

    });
</script>

<body class="pc" id="main">

    <!-- loading -->
    <div id="loadingHome"
        style=" position: fixed; left: 0px;top: -100px; width: 100%;height: 115%;z-index: 999999999999;background-color: #f8c8b2;">
        <img id="loadImg"
            style=" position: relative; height: 2%;width: auto;left: 0%;margin:0px auto;top: 300px; text-align: center;display: none;"
            src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--iconGIF.png"></img>
    </div>

    <div id="downContent">

        <div class="mainImg">
            <div>
                <div id="bg1" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p1" src="https://2021.igem.org/wiki/images/3/3c/T--SZPT-CHINA--HP-Practice.png"
                        class="smallImg"></image>
                </div>
                <div id="bg2" style="background-color: #f8c8b2;float: left;width: 25%;">

                    <image id="p2" src="https://2021.igem.org/wiki/images/0/0c/T--SZPT-CHINA--HP-Communcation.png"
                        class="smallImg"></image>

                </div>
                <div id="bg3" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p3" src="https://2021.igem.org/wiki/images/6/62/T--SZPT-CHINA--HP-education.png"
                        class="smallImg"></image>
                </div>
                <div id="bg4" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p4" src="https://2021.igem.org/wiki/images/d/da/T--SZPT-CHINA--HP-Inclusivity.png"
                        class="smallImg"></image>
                </div>
            </div>
            <div style="z-index: 99;position: absolute;">
                <image src="https://2021.igem.org/wiki/images/5/5f/T--SZPT-CHINA--practice-font.png"
                    style="margin-top: -50px;margin-left: 161px;"> </image>
            </div>
            <div style="margin-top: 50px;">
                <div id="m1" style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;"></div>
                <div id="m2"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 480px;">
                </div>
                <div id="m3"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 960px;">
                </div>
                <div id="m4"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 1440px;">
                </div>
            </div>

        </div>


        <!-- down -->
        <div style="width: 1920px;background-color: #ffffff;">
            <div id="blue" style="float:left; height: 17000px; width: 55px;background-color: #2588d4;">
            </div>
            <div id="directory" style="float:left;margin-top: 8vh;z-index: 990;position: fixed;">
                <div
                    style="margin-top: 9vh;background-color: #dd544d;margin-left: 6vw;border-radius:10px;padding: 1vw;width: 16vw;">
                    <h3 id="dir0p" style="color:#fffea4;padding-left: 10%;font-size:1.3rem;">
                        Integrated Human Practices</h3>
                    <div style="margin-left: 13%;">
                        <div id="dir1" style="color:#ffffff;width: auto;height: 6vh;margin-top: 3vh;">
                            <p id="dir1p" style="font-size: 1.1rem;padding-top: 0vh;">
                                Background：the Problem
                            </p>
                        </div>
                        <div id="dir2" style="color:#ffffff;height:6vh;width: auto;">
                            <p id="dir2p" style="transition: all 0.3s;font-size: 1.1rem;padding-top: 0vh;">
                                Experimental Design

                            </p>
                        </div>
                        <div id="dir3" style="color:#ffffff;height:6vh;width: auto;">
                            <p id="dir3p" style="transition: all 0.3s;font-size: 1.1rem;padding-top: 0vh;">
                                Product Design
                            </p>
                        </div>

                        <div id="dir4" style="color:#ffffff;width: auto;height: 6vh;">
                            <p id="dir4p" style="font-size: 1.1rem;padding-top: 0vh;">
                                Meetings</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content"
                style="float:left;width: 1173px;margin-left: 387px;margin-top: 100px;padding-left:100px;background-color: #ffffff;text-align: justify;">



                <div class="pb">Fire is one of the main disasters among various kinds of disasters that most frequently
                    and universally endangers the safety of the people and property. Almost all fires are accompanied by
                    personal burns. The physical and psychological damage caused by burns is very huge and the treatment
                    process is long and easy to cause infection. Therefore, our team decided to carry out our project
                    for burn treatment this year. By consulting doctors, experts, firefighters, enterprises and
                    pharmacies, we understood the background, designed the experiment and product, evaluated and
                    improved them. And focusing on the feedback, improvement and feedback closed-loop mode, we finally
                    completed our project.</div>



                <div id="third1" class="k">
                    <!-- 目录一 -->
                    <div id="content1" class="yj" style="color:  #2588d4;margin-top: 30px;">● Background：the Problem

                    </div>
                    <image class="pic" src="https://2021.igem.org/wiki/images/2/29/T--SZPT-CHINA--hp-pic-1.png"
                        style="margin-left: 190px;width: 700px;"></image>

                    <div class="tz">Figure 1. Background overview</div>

                    <div class="tz"></div>
                    <div style="display: flex;">
                        <div id="content1ej1" class="ej">
                            Interviews with Firefighters</div>

                    </div>
                    <div id="four1">

                        <div class="pb">
                            The first thing that comes to mind is the fire retrograde-firefighters when we talk
                            about
                            fire. Our team came to the fire station in Xili Street, Nanshan District, Shenzhen and
                            interviewed the firefighters (Figure 2). We have learned that there are two main reasons
                            for
                            fires: the hidden dangers in residential area fire protection improper use of flammable
                            products (batteries, sundries, alcohol disinfection products, etc.). During the
                            interview,
                            firefighters pointed out that in addition to urban fires in factories, household fires
                            are
                            more likely to occur in urban villages.
                        </div>


                        <img src="https://2021.igem.org/wiki/images/c/cc/T--SZPT-CHINA--hp-pic-2.png" class="pic"
                            style="margin-left: 133px;">

                        <div class="tz">Figure 2. Interviewed with Xili Fire Station on April 7, 2021</div>


                        <div class="pb">We learned that firefighters have been rescuing the same person on different
                            occasions. Most burn victims rescued from a fire later tried to end their lives because
                            of
                            incurable scars or high medical expenses which shocked our team and motivated us
                            greatly.
                        </div>

                    </div>
                    <div style="display: flex;">
                        <div id="content1ej2" class="ej">
                            Interviews with Psychological Doctors</div>

                    </div>
                    <div id="four2">

                        <div class="pb">
                            After interviewing with firefighters, we learned that burn could have a serious
                            psychological impact on patients. We contacted psychological doctors and wanted to
                            understand how burns affect patients. We realized that the main psychological
                            problems of burn patients are: self-sealing, woebegone, inferiority, worry, fear and
                            even suicide. This made us wondered, how should we help them?
                        </div>

                    </div>
                    <div style="display: flex;">
                        <div id="content1ej3" class="ej">
                            Interviews with Burn Doctors</div>


                    </div>
                    <div id="four3">
                        <div class="pb">
                            We mainly consulted doctors online in the early stage due to the epidemic. We
                            mainly consulted doctors online in the early stage due to the epidemic. The
                            following doctors were interviewed online from March 28, 2021 to May 28, 2021,
                            2020.
                        </div>

                        <image src="https://2021.igem.org/wiki/images/8/87/T--SZPT-CHINA--practice-plus-png-1.png"
                            class="pic" style="margin-left: 26px;width: 1000px;"></image>
                        <div class="tz">Figure 3. Interviewed with Xili Fire Station
                            on April 7, 2021</div>

                        <div class="pb">
                            Since our team members are not medical majors and do not know much about burn
                            and treatment, we must consult professionals about medicine. Therefore, we
                            interviewed and consulted three burn doctors offline (Figure 4, 5). We
                            consulted the basic knowledge and the treatment of burns. After the doctor's
                            introduction, we found that the treatment of <i>Pseudomonas aeruginosa</i> infection in
                            burn wounds is very essential. After brainstorming, our team finally decided to
                            carry out our project targeting <i>Pseudomonas aeruginosa</i> infection. <span id="hidekey1"
                                style="color:blue;">(<u>Interview
                                    content</u>)</span>

                        </div>


                        <div id="hideContent1">
                            <div class="sj">Summary of the interview with burn doctors</div>

                            <div class="pb">
                                Question1: Nowadays, how to treat burns?
                                <br> Answer: Superficial Ⅱ degree burns and small area burns below
                                superficial Ⅱ degree burns are mainly covered by healthy skin growth around
                                the burn wound and skin grafting are not required. However, for deep Ⅱ
                                degree burns or large area burns, because the subcutaneous tissue or skin
                                layer is totally destroyed, the original skin tissue can no longer grow or
                                heal, then grafting or flap transplantation is needed.
                                <br><br>
                                Question2: What are the advantages and disadvantages of skin grafting?
                                <br>Answer: In addition to the high cost, skin grafting is the most advanced
                                technology.
                                <br><br>
                                Question3: As we learned in the early interview, scars will cause serious
                                psychological harm to patients. The burn wound has been repaired and
                                treated, why did it still have scars? Can't the current restoration
                                technology solve the aesthetic problem?
                                <br>Answer：Although severity of the scar is associated with restoration
                                technology, it's mainly related to the degree of burn infection.
                                <br><br>
                                Question4: Why does is get infected? What are the main infectious bacteria?
                                <br>Answer: There are so many possibilities of surgical infection,
                                debridement , hygiene, environment, wound conditions, etc. The main
                                infectious bacteria were Acinetobacter Baumannii, Staphylococcus aureus and
                                <i>Pseudomonas aeruginosa</i>. <i>Pseudomonas aeruginosa</i> has super intrinsic drug
                                resistance and the ability to produce drug resistance, which makes the
                                treatment effect of many antibiotics for burn patients infected with
                                <i>Pseudomonas aeruginosa</i> worse and worse. Therefore, patients with <i>Pseudomonas
                                    Aeruginosa </i>need higher treatment cost, longer treatment cycles, and even
                                lead to death.
                                <br><br>
                                Question5: Do you have any recommendations for the treatment of <i>Pseudomonas
                                    Aeruginosa</i>?
                                <br> Answer: In the face of the emergence of more and more multi-resistant
                                <i>Pseudomonas aeruginosa</i>, we need a lot of time and economic cost to develop
                                new antibiotics. Therefore, it is very necessary to replace antibiotics with
                                new drugs. The first expectation of new drugs is that they are effective and
                                have few side effects.

                            </div>
                        </div>
                        <image class="pic" src="https://2021.igem.org/wiki/images/7/78/T--SZPT-CHINA--hp-pic-12.png"
                            style="margin-left: 180px;"></image>
                        <div class="tz">Figure 4. Dr. Bai Zheng ( the fifth ) , Dr. Ding Weijia ( the third
                            ), Department of Burn, Longgang Central Hospital, Shenzhen on April 10, 2021
                        </div>

                        <image class="pic" src="https://2021.igem.org/wiki/images/5/5f/T--SZPT-CHINA--hp-pic-13.png"
                            style="margin-left: 190px;width: 700px;"></image>
                        <div class="tz">Figure 5. Interviewed with Dr. Sun Dongyuan , Department of Burn,
                            Shekou People's Hospital, Shenzhen on May 19, 2021</div>

                    </div>
                    <div style="display: flex;">
                        <div id="content1ej4" class="ej">
                            Interviews with Doctors in Other Departments</div>

                    </div>
                    <div id="four4">
                        <div class="pb">During the interview, we found that in chronic wounds
                            <i>Pseudomonas aeruginosa</i> infection may appear. Then we visited the doctor of
                            Chronic Wounds Department (Figure 6), who said <i>Pseudomonas aeruginosa</i> is
                            mainly common and difficult to deal with in burns, but rarely in chronic
                            wounds, which can be treated with ordinary dressing.
                        </div>


                        <image class="pic" src="https://2021.igem.org/wiki/images/f/f6/T--SZPT-CHINA--hp-pic-14.png"
                            style="margin-left: 261px;width: 600px;"></image>
                        <div class="tz">Figure 6. Interviewed with Dr. He Taofang, Department of Chronic
                            Wound, Affiliated Hospital of Southern University of Science and Technology,
                            Shenzhen on April 29, 2021
                        </div>


                        <div class="pb">
                            According to the same thinking, team members believe that major orthopedic
                            surgery is easy to cause infection. We also contacted Dr. Zhu Jinyu,
                            Department of Bone and Joint Surgery, Affiliated Hospital of Southern
                            University of Science and Technology, Shenzhen (Figure 3) and Dr. Liu Jaquan,
                            Osteomyelitis Department of Orthopaedic Hospital, Henan (Figure 4). Both of
                            them said orthopedic surgery are less likely to cause infection. During the
                            operation, doctors will make sure that the wound is not infected as much as
                            possible, and the environment and surgical tools will be disinfected. During
                            the interview, doctors told us that <i>Pseudomonas aeruginosa</i> is mainly
                            found
                            in burns.
                            In order to get more accurate and reliable information, we searched online
                            to contact regional hospital doctors (Figure 8, 9, 10, 11), accidentally
                            found that burn infection with <i>Pseudomonas aeruginosa</i> was related to
                            the
                            geographic location. <i>Pseudomonas aeruginosa</i> is more susceptible to
                            cause
                            infection in humid climates. Therefore, in humid climates (Shenzhen is a hot
                            and humid climate), burn infection with <i>Pseudomonas aeruginosa</i> are
                            more
                            common.

                        </div>
                    </div>
                </div>

                <div id="third2" class="k">
                    <!-- 目录二 -->
                    <div id="content2" class="yj" style="color:#2588d4;margin-top: 30px;">● Experimental Design


                    </div>
                    <image class="pic" src="https://2021.igem.org/wiki/images/8/86/T--SZPT-CHINA--hp-pic-15.png"
                        style="width: 1072px;"></image>

                    <div class="tz">Figure 7. Experimental design overview</div>
                    <div style="display: flex;">
                        <div id="content2ej1" class="ej">
                            Engineering Bacteria</div>


                    </div>
                    <div id="four5">
                        <div class="pb">Our team completed the preliminary design of the experiment
                            under the guidance of our instructors. We contacted Dr. Tang Mingxing,
                            Institute of Advanced Technology, Chinese Academy of Sciences (Figure 8). We expressed our
                            ideas to Dr. Tang and he was very optimistic about
                            our design and asked us a question: What is the carrier of our
                            antibacterial protein? The best option is to find a carrier that can
                            help heal the wound.</div>


                        <image class="pic" src="https://2021.igem.org/wiki/images/b/be/T--SZPT-CHINA--hp-pic-16.png"
                            style="margin-left: 181px;"></image>
                        <div class="tz">Figure 8. Had a meeting with Dr. Tang at SZPT on June 9,
                            2021
                        </div>

                        <div class="pb">After interviewing with firefighters and psychologists, our
                            team always wanted to have a deeper understanding of wound repair.
                            Inspired by Dr. Tang, we found bacterial cellulose after researching
                            literatures consulting our instructors. In order to understand the usage
                            of biological dressing on the market, our team paid a return visit to
                            Dr. Ding Weijia (Figure 9). We asked him about the feasibility of
                            bacterial cellulose and the use of existing dressing, and received a
                            positive response. At the same time, the doctor also showed us many
                            cases, and taught us about burn grade judgment and burn treatment. We
                            benefited a lot from the interview and got help in education. In the
                            end, we decided to use <i>Gluconacetobacter hansenii </i>ATCC 53582 as
                            the
                            chassis and the bacterial cellulose produced by it as the carrier of
                            antibacterial protein, so as to achieve the purpose of antibiosis and
                            repair.</div>

                        <image class="pic" src="https://2021.igem.org/wiki/images/7/7f/T--SZPT-CHINA--hp-pic-17.png"
                            style="margin-left: 226px;"></image>
                        <div class="tz">Figure 9. Return visited to Dr. Ding Weijia, Department of
                            Burn, Longgang Central Hospital, Shenzhen on June 14, 2021</div>

                    </div>
                    <div style="display: flex;">
                        <div id="content2ej2" class="ej">
                            Near Infrared Light (NIR)</div>


                    </div>

                    <div id="four6">
                        <div class="pb">Because the bacteria cellulose production is very low,
                            we have to find ways to speed. In the literature, we found that the
                            visible light is widely used in medical field, so we thought of
                            genetics of the light. We found Processor Jin Fan (Figure 10). Jin
                            Fan introduced genetic knowledge, led us to analyze the production
                            principle of bacteria cellulose. Finally, he suggested that we could
                            add NIR light control module to improve the production of bacterial
                            cellulose, in order to achieve the regulation of NIR light, we
                            finally added a degradation module to control it not to produce
                            bacteria cellulose in dark condition. However, we don't know
                            whether NIR light has an effect on burned skin. We also ask question
                            when learning about the infection of <i>Pseudomonas aeruginosa</i>.
                            After
                            getting doctors' approval did, we officially confirmed and started
                            the experiment, and finally we made it.
                        </div>


                        <image class="pic" src="https://2021.igem.org/wiki/images/f/f3/T--SZPT-CHINA--hp-pic-18.png"
                            style="margin-left: 186px;"></image>
                        <div class="tz">Figure 10. Communicated with Professor Jin on April 14,
                            2021
                        </div>
                        <div class="pb">At the beginning of the experiment of regulating
                            bacterial cellulose by NIR light, we found that the production of
                            bacterial cellulose did not increase significantly under NIR light,
                            so we consulted Dr. Ye Haifeng, an expert in Optogenetics (Figure
                            11), who suggested optimizing the parameters such as the light
                            distance and the composition of the culture medium. According to the
                            above suggestions, we found through a series of experiments that
                            bacterial cellulose can be generated quickly under NIR light.(<u>For more details, please
                                click <a href="https://2021.igem.org/Team:SZPT-CHINA/Results">results</a></u>).</div>

                        <image class="pic" src="https://2021.igem.org/wiki/images/a/aa/T--SZPT-CHINA--hp-pic-19.png"
                            style="margin-left: 188px;"></image>
                        <div class="tz">Figure 11. Connected with Dr. Ye Haifeng, East China
                            Normal University on June 21, 2021
                        </div>
                    </div>
                    <div style="display: flex;">
                        <div id="content2ej3" class="ej">
                            Safety and Drug Release Module (Blue Light)</div>


                    </div>
                    <div id="four7">

                        <div class="pb">Since the antibacterial protein is synthesized in
                            the body of <i>Gluconacetobacter hansenii </i>ATCC 53582, it is
                            necessary to find ways to release the drug protein to make it
                            play a role. In addition, considering safety issues, we need to
                            add lysis module for <i>Gluconacetobacter hansenii </i> ATCC
                                53582. Our
                            team paid a return visit to Professor Jin Fan who recommended
                            the pDawn promoter. We used NIR light to control the production
                            of bacterial cellulose. If we also use light to lysate
                            bacterial, it will be more convenient and save medical
                            consumption, which should be our best choice.
                        </div>
                    </div>
                </div>

                <div id="third3" class="k">
                    <!-- 目录三 -->
                    <div id="content3" class="yj" style="margin-top: 30px;">● Product Design

                    </div>
                    <image class="pic" src="https://2021.igem.org/wiki/images/0/0d/T--SZPT-CHINA--hp-pic-20.png"
                        style="margin-left: 220px;width: 648px;"></image>
                    <div class="tz">Figure 12. Product design overview</div>

                    <div style="display: flex;">
                        <div id="content3ej1" class="ej">
                            Source of Inspiration</div>

                    </div>
                    <div id="four8">

                        <div class="pb">In the process of the experiment, we began to
                            imagine the form of our product. In the literature, we found
                            the spray of Bacillus subtilis, which is suitable for the
                            prevention and treatment of small area second degree burn
                            wound infection we were inspired to use our product in the
                            form of live bacteria.
                            <br>
                            <br>
                            Pharmacy interview: visit pharmacies to gain information
                            about products. We visited each pharmacy (11 pharmacies)
                            near school and learned about the existing burn treatment
                            products and the forms of live bacteria products.<span id="hidekey2"
                                style="color: blue;">（<u>Content of
                                    interview</u>）
                            </span></span>
                        </div>

                        <div style="display: flex;">
                            <image src="https://2021.igem.org/wiki/images/9/96/T--SZPT-CHINA--hp-pic-21.png" class="pic"
                                style="margin-left: 32px;"></image>
                            <image src="https://2021.igem.org/wiki/images/b/b3/T--SZPT-CHINA--hp-pic-22.png" class="pic"
                                style="margin-left: 92px;"></image>
                        </div>
                        <div class="tz">Figure 13, 14. Interviewed with pharmacies on
                            August 18, 2021
                        </div>
                        <div id="hideContent2">
                            <div class="pb">Question1: What are the main types of
                                treatment burn products on the market today?
                                <br> Answer: Most of them are ointment types, such as
                                MEBO, which is the most convenient, most consumers
                                prefer to buy them.
                                <br><br>Question2: What are the types of live bacteria
                                products?
                                <br> Answer: Capsule, tablet, infusion and ointment.
                                <br><br>Question3: What are the live bacteria in the
                                current live bacteria products?
                                <br>Answer: Probiotics and Bifidobacterium.
                                <br><br>Question4: What kind of diseases are these live
                                bacteria products mainly used to treat?
                                <br>Answer: Stomach.
                                <br><br>Question5: Do you have any suggestions or
                                expectations for our project?
                                <br>Answer: The first point of live bacteria products is
                                the safety issue, the second is the good effect, and the
                                last is the price.

                            </div>
                        </div>
                    </div>
                    <div style="display: flex;">
                        <div id="content3ej2" class="ej">
                            Interviews with Burn Doctors</div>


                    </div>
                    <div id="four9">

                        <div class="pb">In order to determine the product form, we
                            once again consulted Dr. Ding Weijia, from the Burn
                            Department (Figure 7), about his views on live bacterial
                            dressings. Dr. Ding asked us questions, can we ensure
                            the safety of live bacteria? Is the secretion of live
                            bacteria harmful to the human body? What is the
                            patient's acceptance of live bacteria? In response to
                            safety issues, we introduced our safety and drug release
                            module to Dr. Ding. Dr, Ding said that the idea was
                            fabulous. In terms of treatment and use, live bacteria
                            dressing products have good feasibility, but we still
                            need to consider safety issues, such as for the blue
                            light lysis bacteria.
                        </div>
                    </div>
                    <div style="display: flex;">
                        <div id="content3ej3" class="ej">
                            Questionnaire survey</div>


                    </div>
                    <div id="four10">

                        <div class="pb">
                            Reminded from Dr. Ding, we considered our
                            stakeholders (the public). Based on the content of
                            the project, we published a questionnaire to
                            investigate public's understanding and acceptance of
                            live bacteria products, as well as their
                            recommendations and needs for burn drugs.
                            <br><br>
                            According to the statistics, the public's
                            understanding of live bacteria is mainly from food,
                            and they are willing to try live bacteria drugs. The
                            main suggestions are products should be convenient
                            to use and effective.

                            <a href="https://2021.igem.org/wiki/images/1/12/T--SZPT-CHINA--hp-ppt-1.pptx">survey
                                data</a>
                        </div>
                    </div>
                    <div style="display: flex;">
                        <div id="content3ej4" class="ej">
                            Interviews with Biological Security Expert</div>


                    </div>
                    <div id="four11">

                        <div class="pb">
                            During the investigation, we have been asked
                            many times about the safety of live bacteria. We
                            found Dr. Xiong Yan, a biological security
                            expert, to assess whether the bacteria we were
                            using was dangerous. Dr. Xiong told us that the
                            strains we were using had high safety
                            performance, and there was a suicide module,
                            which would not have much impact on the safety
                            of human body. And the coconut we usually eat
                            was cultivated by <i>Gluconacetobacter
                                hansenii</i>, so
                            its safety is relatively high. These results
                            allowed us to move towards the direction of
                            viable bacteria.
                        </div>
                    </div>
                    <div style="display: flex;">
                        <div id="content3ej5" class="ej">
                            Artificial Leather Enterprises</div>


                    </div>
                    <div id="four12">


                        <div class="pb">We visited Shenzhen Lando
                            Biomaterials Co.,Ltd., Lando artificial
                            leather is the first leather regeneration
                            and repair technology in China. We had a
                            conversation with the technical director of
                            Lando, who introduced the company and their
                            product technology. Later, our team visited
                            the company's laboratory and various
                            equipment in the laboratory. We gained
                            advice. Technical director suggested that we
                            should first determine our product type,
                            whether to simply make dressings or tissue
                            scaffolds. Dressing is relatively simple.
                            However, if it is a tissue scaffold, the
                            degradation of the material and the pore
                            size should be considered, which determines
                            whether the new cells or blood vessels can
                            penetrate and regenerate.


                        </div>

                        <image src="https://2021.igem.org/wiki/images/5/5e/T--SZPT-CHINA--hp-pic-23.png" class="pic"
                            style="margin-left: 154px;">
                        </image>
                        <div class="tz">Figure 15. Communicated with a
                            technical director in Lando on August 11,
                            2021
                        </div>

                        <div class="pb">After the communication with the
                            technical director of Lando, we also visited
                            the laboratory and production workshop. At
                            the same time, we had an in-depth
                            communication with the technical personnel
                            involved in the research and development of
                            artificial leather project, and learned
                            about the material, production process and
                            use mode of artificial leather.

                        </div>

                        <image src="https://2021.igem.org/wiki/images/3/34/T--SZPT-CHINA--hp-pic-24.png" class="pic"
                            style="margin-left: 176px;">
                        </image>
                        <div class="tz">Figure 16. Communicated with
                            technicians from Lando on August 11, 2021
                        </div>

                    </div>
                    <div style="display: flex;">
                        <div id="content3ej6" class="ej">
                            live bacteria enterprises</div>

                    </div>
                    <div id="four13">

                        <div class="pb"> In our cooperation and
                            communication with NWU-China-A team, we
                            also helped each other to find
                            enterprises we need. NWU-China-A found a
                            live bacteria enterprise for us (Xi'an
                            Donghai Live Bacteria Brand Promotion
                            Co., LTD.). Due to epidemic prevention
                            and control, we online consulted the
                            manager of the enterprise about live
                            bacteria products. The manager of the
                            enterprise introduced to us that the
                            main types of live bacteria products on
                            the market are tablets, capsules and
                            ointment, and the existing live bacteria
                            products are mainly used in clinical,
                            health care products, food, medical
                            beauty and additives. It is not
                            recommended to make tablet viable
                            products because of the high cost of
                            tablet technology. Instead of just live
                            bacteria, experts suggested we make our
                            own live by-products.
                            <br><br>
                            Then we also visited a Biotechnology
                            company, Shenzhen Agrecoe Bio-technology
                            Co.,Ltd, . After learning that there
                            were microbial agents in the products
                            produced by the enterprise, we first
                            visited the workshop of Shenzhen Agrecoe
                            Bio-technology Co.,Ltd, and consulted
                            technical personnel for problems we
                            encountered when making our products. We
                            also met with the president of the board
                            and introduced our project as well as
                            our ideas on product design to him. The
                            president talked about his experience
                            and told us that the company's sales
                            volume of bactericide was relatively
                            good, and the market feedback of
                            bactericide was better than that of
                            bactericide powder. The production
                            process of the two products were the
                            same, but the final form was different.

                        </div>

                        <div style="display: flex;">
                            <image src="https://2021.igem.org/wiki/images/0/03/T--SZPT-CHINA--hp-pic-25.png" class="pic"
                                style="margin-left: 7px;">
                            </image>
                            <image src="https://2021.igem.org/wiki/images/f/f1/T--SZPT-CHINA--hp-pic-26.png" class="pic"
                                style="margin-left: 100px;">
                            </image>
                        </div>
                        <div class="tz">Figure 17, 18. Communicated
                            with Shezhen Agrecoe Bio-technology
                            Co.,Ltd on August 23, 2021
                        </div>



                        <div class="pb">The president's sharing
                            inspired us. We wanted to make our live
                            bacteria into cream form, which could
                            also follow the results of our previous
                            pharmacy surveys. Most consumers choose
                            the ointment type drugs.</div>


                    </div>
                    <div style="display: flex;">
                        <div id="content3ej7" class="ej">
                            The design of devices</div>
                    </div>
                    <div id="four13plus">
                        <div class="pb">
                            Since our products need to
                            be
                            illuminated when in use, we need
                            to
                            design a lighting device. During
                            the
                            early interview with the
                            firefighters,
                            firefighters mentioned that what
                            they
                            needed most for the product was
                            portable. In the early
                            interview, we
                            also sought advice from a
                            doctor,
                            who
                            thought that our product needed
                            two
                            different kinds of light
                            illumination,
                            and the device could consider a
                            dual-light type to reduce
                            consumables.
                            Therefore, our team discussed
                            and
                            designed a portable light device
                            with
                            dual light control (as shown in
                            the
                            Figure 26), which can be used
                            with
                            our
                            live bacteria product. However,
                            this
                            portable device is only suitable
                            for
                            small area burns, and for large
                            area
                            burns, we need a larger device.
                            And
                            finally, we designed another
                            device
                            with
                            LED arrangement (as shown in the
                            Figure
                            27).
                        </div>
                        <image src="https://2021.igem.org/wiki/images/3/34/T--SZPT-CHINA--practice-plus-png-2.png"
                            class="pic" style="margin-left: 100px;"></image>
                        <div class="tz">Figure 19. Portable
                            light
                            control device for small area
                            burns.
                        </div>

                        <image src="https://2021.igem.org/wiki/images/0/09/T--SZPT-CHINA--practice-plus-png-3.png"
                            class="pic" style="margin-left: 100px;"></image>
                        <div class="tz">Figure 20. The
                            apparatus
                            with an
                            array of LEDs for treatment of
                            large
                            area
                            burns

                        </div>
                    </div>
                </div>




                <div id="third4" class="k">
                    <!-- 目录四 -->
                    <div id="content4" class="yj" style="margin-top: 30px;">
                        ● Meetings

                    </div>
                    <div style="display: flex;">
                        <div id="content4ej1" class="ej">
                            Central China Regional Meeting </div>


                    </div>
                    <div id="four14">



                        <div class="pb">Due to the strict
                            prevention and control of the
                            epidemic, this year's Central
                            China
                            Regional Meeting was held online
                            on
                            May 29<sup>th</sup>. For the project
                            introduction of each team, our
                            team
                            found that the experimental
                            design
                            of FAFU-China was similar to
                            ours.
                            After the meeting, we got in
                            touch
                            with them and confirmed our
                            long-term cooperation.
                        </div>

                        <image src="https://2021.igem.org/wiki/images/f/fd/T--SZPT-CHINA--hp-pic-27.png" class="pic"
                            style="margin-left: 322px;">
                        </image>
                        <div class="tz">Figure 21. Central
                            China
                            Regional Meeting on May 29, 2021
                        </div>

                    </div>
                    <div style="display: flex;">
                        <div id="content4ej2" class="ej">
                            Southern China Regional Meeting
                        </div>

                    </div>
                    <div id="four15">

                        <div class="pb">On August
                            6<sup>th</sup>, the
                            South China Regional Meeting
                            was
                            held online by SZU-China.
                            More
                            than 20 teams from South
                            China
                            introduced the project
                            respectively. After watching
                            the
                            project introduction of
                            other
                            teams, the instructor found
                            our
                            team's shortcomings in
                            project
                            summary and English speech.
                            Then
                            we made timely adjustments
                            and
                            improvements after the
                            meeting.
                        </div>
                    </div>

                    <div style="display: flex;">
                        <div id="content4ej3" class="ej">
                            CCiC</div>


                    </div>
                    <div id="four16">



                        <div class="pb">From August
                            27
                            to 29, 2021, 79 teams
                            from
                            China were having an
                            online
                            and offline exchange,
                            which
                            was organized by Fudan
                            University. During the
                            conference, we actively
                            communicated with other
                            teams (NWU-China-A,
                            Jiangnan-China,
                            NUDT-CHINA).
                            While making
                            suggestions, we
                            also received many
                            valuable
                            opinions and finally won
                            the
                            Active Participation
                            Awards.
                            We discussed the
                            comments
                            from experts immediately
                            after the project.
                        </div>


                        <image src="https://2021.igem.org/wiki/images/c/cf/T--SZPT-CHINA--hp-pic-28.png" class="pic"
                            style="margin-left: 30px;width: 1010px;">
                        </image>
                        <div class="tz">Figure 22.
                            CCiC
                            announced the winning
                            teams
                            on August 29, 2021
                        </div>
                    </div>
                </div>
            </div>
            <div id="red"
                style="float: left;margin-left: 150px; height: 17000px;width: 55px;background-color: #d44225;">
            </div>
        </div>
        <div>
            <image src="https://2021.igem.org/wiki/images/8/8d/T--SZPT-CHINA--bottomPic.png" class="pic"
                style="margin-top: -372px;width: 1920px;"></image>
        </div>
    </div>
</body>
<style>
    .yj {
        margin-top: 50px;
    }

    .k {
        box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%);
        padding: 50px;
        margin-top: 50px;
    }
</style>
<script>
    var bodyStyle = document.createElement('style')
    var docWidth, docHeight;
    var designWidth, designHeight;

    // 屏幕缩放实现
    function refreshScale() {
        bodyStyle.innerHTML = `body{width:${designWidth}px; height:${designHeight}px!important;}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.getElementById('main').style = 'display:flex'
        //document.getElementsByClassName('mobile')[0].style = 'display:none'

        var widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        var topRatio = 26 * heightRatio;
        //heightRatio=0.782222;
        //解决因transform导致margin-top
        document.getElementById('content').style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left
top;margin-top: -${topRatio}px;`;
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function () {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight
            document.getElementById('content').style = "transform:scale(" + widthRatio + "," + heightRatio +
                ");transform-origin:left top;margin-top: -${topRatio}px;"
        }, 0)
    }

    // 清除scale
    function clearScale() {
        // 清除pc样式
        bodyStyle.innerHTML = ``
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.body.style = "transform:none;transform-origin:none"
    }

    // 初始化
    function init() {
        // 获取当前屏幕可视区域大小
        docWidth = document.documentElement.clientWidth;
        docHeight = document.documentElement.clientHeight;
        // 判断是否是移动设备
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {

            // mobilePage();
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 3100;
            mainClass.add('pc');
            mainClass.remove('large');

            var value = document.getElementById('blue').getAttribute("style")
            value = value.replace(/11000/, "15500")
            $("#blue").attr("style", value);

            var value = document.getElementById('red').getAttribute("style")
            value = value.replace(/11000/, "15500")
            $("#red").attr("style", value);
            //手机适配目录
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir1").attr("style", value);
            //margin
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/3vh/, "1vh")
            $("#dir1").attr("style", value);

            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir2").attr("style", value);

            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir3").attr("style", value);

            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir4").attr("style", value);


            var value = document.getElementById('dir0p').getAttribute("style")
            value = value.replace(/1.8rem/, "1.3rem")
            $("#dir0p").attr("style", value);

            var value = document.getElementById('dir1p').getAttribute("style")
            value = value.replace(/1.1rem/, "0.9rem")
            $("#dir1p").attr("style", value);

            var value = document.getElementById('dir2p').getAttribute("style")
            value = value.replace(/1.1rem/, "0.9rem")
            $("#dir2p").attr("style", value);

            var value = document.getElementById('dir3p').getAttribute("style")
            value = value.replace(/1.1rem/, "0.9rem")
            $("#dir3p").attr("style", value);

            var value = document.getElementById('dir4p').getAttribute("style")
            value = value.replace(/1.1rem/, "0.9rem")
            $("#dir4p").attr("style", value);

            refreshScale()
        } else {
            //pc
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 980;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()

        }
    }

    // 大屏设置 rem 函数
    function setRem(designSize) {
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度

        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize = rem + "px";
    }



    // 移动端页面
    function mobilePage() {
        clearScale()
        // 是移动设备 展示移动设备页
        //document.getElementById('main').style = 'display:none'
        //document.getElementsByClassName('mobile')[0].style = 'display:flex'
        // mobile 设置 rem 函数
        let designSize = 750;
        setRem(designSize);


    }

    // 初始化
    //init();

    // 监听前进/后退以及load事件触发
    window.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            init()
        }
    }, false);

    // 监听屏幕缩放
    window.addEventListener("resize", function () {
        init()
    }, false);
</script>
<!-- END-适配 -->



</html>